<template>
  <div class="practice-result-display">
    <a-card class="section-card result-card">
      <template #title>
        <div class="result-header">
          <div class="result-title">
            <trophy-outlined class="result-icon" />
            <span>练习结果</span>
          </div>
          <a-tag :color="getResultColor(correctRate)" class="result-tag">
            {{ correctRate.toFixed(1) }}% 正确率
          </a-tag>
        </div>
      </template>

      <!-- 结果概览 -->
      <div class="result-summary">
        <a-row :gutter="24">
          <a-col :span="6">
            <div class="summary-item">
              <div class="summary-icon total">
                <file-text-outlined />
              </div>
              <div class="summary-content">
                <div class="summary-value">{{ exercises.length }}</div>
                <div class="summary-label">总题数</div>
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="summary-item">
              <div class="summary-icon correct">
                <check-circle-outlined />
              </div>
              <div class="summary-content">
                <div class="summary-value">{{ correctNumber }}</div>
                <div class="summary-label">正确数</div>
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="summary-item">
              <div class="summary-icon incorrect">
                <close-circle-outlined />
              </div>
              <div class="summary-content">
                <div class="summary-value">{{ exercises.length - correctNumber }}</div>
                <div class="summary-label">错误数</div>
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="summary-item">
              <div class="summary-icon time">
                <clock-circle-outlined />
              </div>
              <div class="summary-content">
                <div class="summary-value">{{ practiceDuration }}</div>
                <div class="summary-label">耗时</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- 成绩评价 -->
      <div class="result-evaluation">
        <div class="evaluation-content">
          <div class="evaluation-score">
            <div class="score-circle" :class="getScoreLevel(correctRate)">
              <span class="score-text">{{ getScoreGrade(correctRate) }}</span>
            </div>
          </div>
          <div class="evaluation-text">
            <h3>{{ getEvaluationTitle(correctRate) }}</h3>
            <p>{{ getEvaluationMessage(correctRate) }}</p>
          </div>
        </div>
      </div>

      <a-divider />

      <!-- 题目详情 -->
      <div class="result-details">
        <div class="details-header">
          <h3>答题详情</h3>
          <div class="filter-tabs">
            <a-radio-group v-model:value="filterType" button-style="solid" size="small">
              <a-radio-button value="all">全部</a-radio-button>
              <a-radio-button value="correct">正确</a-radio-button>
              <a-radio-button value="incorrect">错误</a-radio-button>
            </a-radio-group>
          </div>
        </div>

        <div class="result-list">
          <div
            v-for="(result, index) in filteredResults"
            :key="result.id"
            class="result-item"
            :class="{ incorrect: result.isCorrect }"
          >
            <div class="result-question-header">
              <div class="question-info">
                <span class="question-number">第 {{ getOriginalIndex(result) + 1 }} 题</span>
                <a-tag :color="getTypeColor(result?.type || '选额题')" size="small">{{ result.type }}</a-tag>
              </div>
              <div class="result-actions-top">
                <a-button
                  v-if="result.isCorrect"
                  type="primary"
                  size="small"
                  @click="$emit('addToErrorCollection', result)"
                  class="error-btn"
                >
                  <book-outlined />
                  加入错题本
                </a-button>
                <a-tag :color="result.isCorrect? 'success' : 'error'">
                  {{ result.isCorrect? '正确' : '错误' }}
                </a-tag>
              </div>
            </div>

            <div class="result-question-content">
              <div v-html="result.content" class="question-description"></div>
            </div>

            <div class="result-answers">
              <div class="answer-row">
                <span class="answer-label user-answer">你的答案:</span>
                <span
                  class="answer-value"
                  :class="{ 'incorrect-answer': result.isCorrect }"
                >
                  {{ result.userAnswer || '未作答' }}
                </span>
              </div>
              <div class="answer-row">
                <span class="answer-label correct-answer">正确答案:</span>
                <span class="answer-value correct-value">{{ result.answer }}</span>
              </div>
            </div>

            <div v-if="result.isCorrect" class="result-explanation">
              <a-collapse ghost>
                <a-collapse-panel key="1" header="查看解析" class="explanation-panel">
                  <template #extra>
                    <bulb-outlined style="color: #faad14" />
                  </template>
                  <div v-html="result.explanation" class="explanation-content"></div>
                </a-collapse-panel>
              </a-collapse>
            </div>

            <!-- 学习助手提示 -->
            <div class="learning-assistant-tip">
              <a-button
                type="link"
                size="small"
                @click="askLearningAssistant(result)"
                class="assistant-tip-btn"
              >
                <question-circle-outlined />
                不清楚该知识点？去问问学习助手
              </a-button>
            </div>
          </div>
        </div>

        <a-empty v-if="filteredResults.length === 0" description="没有符合条件的题目" />
      </div>

      <!-- 操作按钮 -->
      <div class="result-actions">
        <a-button
          type="primary"
          size="large"
          @click="$emit('startNewPractice')"
          class="action-btn primary"
        >
          <thunderbolt-outlined />
          开始新练习
        </a-button>
        <a-button
          size="large"
          @click="$emit('reviewIncorrect')"
          :disabled="correctNumber === exercises.length"
          class="action-btn"
        >
          <book-outlined />
          复习错题
        </a-button>
        <a-button size="large" @click="$emit('exportResult')" class="action-btn">
          <download-outlined />
          导出结果
        </a-button>
        <a-button size="large" @click="showAnalysisReport" class="action-btn">
          <bar-chart-outlined />
          智能分析报告
        </a-button>
      </div>

      <!-- 智能分析报告模态框 -->
      <a-modal
        v-model:open="analysisModalVisible"
        title="智能分析报告"
        width="800px"
        :footer="null"
        class="analysis-modal"
      >
        <div class="analysis-content">
          <!-- 总体概览 -->
          <div class="analysis-section">
            <h3><bar-chart-outlined /> 总体表现</h3>
            <div class="overview-stats">
              <div class="stat-item">
                <div class="stat-value">{{ correctRate.toFixed(1) }}%</div>
                <div class="stat-label">正确率</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ correctNumber }}/{{ exercises.length }}</div>
                <div class="stat-label">答对题数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ practiceDuration }}</div>
                <div class="stat-label">用时</div>
              </div>
            </div>
          </div>

          <!-- 题型分析 -->
          <div class="analysis-section">
            <h3><file-text-outlined /> 题型分析</h3>
            <div class="type-analysis">
              <div v-for="typeStats in typeStatistics" :key="typeStats.type" class="type-item">
                <div class="type-header">
                  <span class="type-name">{{ typeStats.type }}</span>
                  <span class="type-rate" :class="getRateClass(typeStats.rate)">
                    {{ typeStats.rate.toFixed(1) }}%
                  </span>
                </div>
                <div class="type-progress">
                  <a-progress
                    :percent="typeStats.rate"
                    :stroke-color="getProgressColor(typeStats.rate)"
                    :show-info="false"
                  />
                </div>
                <div class="type-detail">{{ typeStats.correct }}/{{ typeStats.total }} 题正确</div>
              </div>
            </div>
          </div>

          <!-- 易错题分析 -->
          <div class="analysis-section">
            <h3><close-circle-outlined /> 易错题分析</h3>
            <div class="error-analysis">
              <div v-if="errorQuestions.length === 0" class="no-errors">
                <div class="success-icon">
                  <check-circle-outlined />
                </div>
                <div class="success-text">恭喜！本次练习全部答对，没有错题</div>
              </div>
              <div v-else>
                <div class="error-summary">
                  <span class="error-count">共有 {{ errorQuestions.length }} 道错题</span>
                  <span class="error-rate"
                    >错误率:
                    {{ ((errorQuestions.length / exercises.length) * 100).toFixed(1) }}%</span
                  >
                </div>
                <div class="error-questions">
                  <div
                    v-for="(question, index) in errorQuestions"
                    :key="question.id"
                    class="error-question-item"
                  >
                    <div class="question-header">
                      <span class="question-number">第{{ getOriginalIndex(question) + 1 }}题</span>
                      <span class="question-type-tag">{{ question.type }}</span>
                    </div>
                    <div class="question-content">{{ question.content }}</div>
                    <div class="answer-comparison">
                      <div class="answer-item correct">
                        <span class="answer-label">正确答案:</span>
                        <span class="answer-value">{{ question.answer }}</span>
                      </div>
                      <div class="answer-item incorrect">
                        <span class="answer-label">你的答案:</span>
                        <span class="answer-value">{{ question.userAnswer || '未作答' }}</span>
                      </div>
                    </div>
                    <div v-if="question.explanation" class="question-explanation">
                      <div class="explanation-label"><bulb-outlined /> 解析</div>
                      <div class="explanation-content" v-html="question.explanation"></div>
                    </div>
                    <div class="error-reason">
                      <div class="reason-label"><exclamation-circle-outlined /> 可能原因</div>
                      <div class="reason-content">{{ getErrorReason(question) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 知识点分析 -->
          <div class="analysis-section">
            <h3><bulb-outlined /> 知识点掌握情况</h3>
            <div class="knowledge-analysis">
              <div
                class="knowledge-item"
                v-for="knowledge in knowledgeAnalysis"
                :key="knowledge.point"
              >
                <div class="knowledge-header">
                  <span class="knowledge-name">{{ knowledge.point }}</span>
                  <span class="knowledge-level" :class="knowledge.level">
                    {{ getLevelText(knowledge.level) }}
                  </span>
                </div>
                <div class="knowledge-detail">
                  {{ knowledge.description }}
                </div>
                <div class="knowledge-questions">
                  <div class="questions-label">相关题目:</div>
                  <div class="question-tags">
                    <span
                      v-for="qIndex in knowledge.questionIndexes"
                      :key="qIndex"
                      class="question-tag"
                      :class="{ correct: dataList[qIndex].isCorrect }"
                    >
                      第{{ qIndex + 1 }}题
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 个性化改进建议 -->
          <div class="analysis-section">
            <h3><book-outlined /> 个性化改进建议</h3>
            <div class="suggestions">
              <!-- 基础建议 -->
              <div class="suggestion-category">
                <h4>📚 学习建议</h4>
                <div
                  v-for="suggestion in learningAdvice"
                  :key="suggestion.type"
                  class="suggestion-item"
                >
                  <div class="suggestion-icon">
                    <component :is="suggestion.icon" />
                  </div>
                  <div class="suggestion-content">
                    <div class="suggestion-title">{{ suggestion.title }}</div>
                    <div class="suggestion-desc">{{ suggestion.description }}</div>
                    <div v-if="suggestion.resources" class="suggestion-resources">
                      <span class="resources-label">推荐资源:</span>
                      <span
                        v-for="resource in suggestion.resources"
                        :key="resource"
                        class="resource-tag"
                      >
                        {{ resource }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 练习建议 -->
              <div class="suggestion-category">
                <h4>🎯 练习建议</h4>
                <div
                  v-for="suggestion in practiceAdvice"
                  :key="suggestion.type"
                  class="suggestion-item"
                >
                  <div class="suggestion-icon">
                    <component :is="suggestion.icon" />
                  </div>
                  <div class="suggestion-content">
                    <div class="suggestion-title">{{ suggestion.title }}</div>
                    <div class="suggestion-desc">{{ suggestion.description }}</div>
                    <div v-if="suggestion.schedule" class="suggestion-schedule">
                      <span class="schedule-label">建议计划:</span>
                      <span class="schedule-content">{{ suggestion.schedule }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 复习计划 -->
              <div class="suggestion-category">
                <h4>📅 复习计划</h4>
                <div class="review-plan">
                  <div class="plan-item" v-for="plan in reviewPlan" :key="plan.period">
                    <div class="plan-period">{{ plan.period }}</div>
                    <div class="plan-content">{{ plan.content }}</div>
                    <div class="plan-focus">重点: {{ plan.focus }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  TrophyOutlined,
  FileTextOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ClockCircleOutlined,
  BookOutlined,
  BulbOutlined,
  ThunderboltOutlined,
  DownloadOutlined,
  BarChartOutlined,
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
interface judgedExercises{
  id?: number
  content?: string
  type?: string
  answer?: string
  userAnswer:string
  explanation?: string
  difficulty?: string
  knowledgePoint?: string
  isCorrect?: boolean
  improvement?: string
}
interface Props {
  exercises: API.ExercisesVO[]
  practiceDuration: string
  exerciseResult:API.judgeResponse[]
  userAnswers:Record<string, string>
}

const props = defineProps<Props>()
// const judgedExercises
const dataList = computed<judgedExercises[]>(() =>
  props.exercises.map(vo => {
    const res = props.exerciseResult.find(r => r.id === vo.id);
    return {
      id: vo.id,
      content: vo.content,
      type: vo.type,
      answer: vo.answer,
      userAnswer: props.userAnswers[String(vo.id)] ?? '',   // 如果没有，给个默认值
      explanation: vo.explanation,
      difficulty: vo.difficulty,
      knowledgePoint: vo.knowledgePoint,
      isCorrect: res?.isCorrect,
      improvement: res?.improvement
    };
  })
);
//判题后的题目
// const dataList = ref<judgedExercises[]>([])
const router = useRouter()
//得到正确数
const correctNumber = computed(()=>{
  return props.exerciseResult.filter(e=>e.isCorrect).length
})
//正确率
const correctRate = computed(()=>{
  return props.exerciseResult.length  >0 ? (correctNumber.value / props.exercises.length) * 100 : 0
})
// 筛选类型
const filterType = ref<'all' | 'correct' | 'incorrect'>('all')

// 智能分析报告模态框
const analysisModalVisible = ref(false)

// 筛选后的结果
const filteredResults = computed(() => {
  if (filterType.value === 'all') return dataList.value
  if (filterType.value === 'correct') {
    return dataList.value.filter((ex) => ex.isCorrect)
  }
  return dataList.value.filter((ex) => !ex.isCorrect)
})

// 获取原始索引
const getOriginalIndex = (result: judgedExercises) => {
  return props.exercises.findIndex((ex) => ex.id === result.id)
}

// 显示智能分析报告
const showAnalysisReport = () => {
  analysisModalVisible.value = true
}

// 跳转到学习助手并发送题目相关问题
const askLearningAssistant = (exercise: judgedExercises) => {
  // 构造问题内容
  const questionContent = `我在做练习时遇到了这道题目：\n\n题目内容：${exercise?.content?.replace(/<[^>]*>/g, '')}\n\n
  我的答案是：${exercise.userAnswer || '未作答'}\n
  正确答案是：${exercise.answer}\n\n请帮我详细解释一下这道题目的知识点，以及为什么正确答案是这样的？`

  // 跳转到学习助手页面，并通过query参数传递问题
  router.push({
    path: '/student/learning_assistant',
    query: {
      autoMessage: questionContent,
    },
  })
}
// 题型统计
const typeStatistics = computed(() => {
  const typeMap = new Map()

  dataList.value.forEach((exercise) => {
    const type = exercise.type
    if (!typeMap.has(type)) {
      typeMap.set(type, { type, total: 0, correct: 0 })
    }
    const stats = typeMap.get(type)
    stats.total++
    if (exercise.isCorrect) {
      stats.correct++
    }
  })
  return Array.from(typeMap.values()).map((stats) => ({
    ...stats,
    rate: stats.total > 0 ? (stats.correct / stats.total) * 100 : 0,
  }))
})

// 错题列表
const errorQuestions = computed(() => {
  return dataList.value.filter((ex) => !ex.isCorrect)
})

// 获取错题原因分析
const getErrorReason = (question: judgedExercises) => {
  const reasons = []

  // 基于题目类型分析
  if (question.type === '选择题') {
    if (!question.userAnswer) {
      reasons.push('未作答，可能是时间不够或对题目不确定')
    } else {
      reasons.push('可能是对概念理解不够深入，或者被干扰选项误导')
    }
  } else if (question.type === '填空题') {
    if (!question.userAnswer) {
      reasons.push('未作答，可能是对知识点记忆不牢固')
    } else {
      reasons.push('可能是关键词记忆有误，或者表达不够准确')
    }
  } else if (question.type === '判断题') {
    reasons.push('可能是对概念的理解存在偏差，建议重新学习相关知识点')
  }

  // 基于题目内容分析
  if (question.content?.includes('TensorFlow')) {
    reasons.push('TensorFlow.js相关概念需要加强实践')
  }
  if (question.content?.includes('async') || question.content?.includes('异步')) {
    reasons.push('异步编程概念需要通过更多代码实践来理解')
  }
  if (question.content?.includes('模型') || question.content?.includes('训练')) {
    reasons.push('机器学习模型相关理论需要结合实际案例学习')
  }

  return reasons.length > 0 ? reasons[0] : '建议重新学习相关知识点，多做类似练习'
}

// 知识点分析（基于模拟数据）
const knowledgeAnalysis = computed(() => {
  const analysis = []

  // 基于题目内容分析知识点掌握情况
  const tensorflowQuestions = dataList.value
    .map((ex, index) => ({ ex, index }))
    .filter((item) => item.ex.content?.includes('TensorFlow') || item.ex.content?.includes('模型'))
  const jsQuestions = dataList.value
    .map((ex, index) => ({ ex, index }))
    .filter((item) => item.ex.content?.includes('JavaScript') || item.ex.content?.includes('async'))
  const dataQuestions = dataList.value
    .map((ex, index) => ({ ex, index }))
    .filter((item) => item.ex.content?.includes('数据') || item.ex.content?.includes('归一化'))

  if (tensorflowQuestions.length > 0) {
    const correct = tensorflowQuestions.filter((item) => item.ex.isCorrect).length
    const rate = (correct / tensorflowQuestions.length) * 100
    analysis.push({
      point: 'TensorFlow.js基础',
      level: rate >= 80 ? 'excellent' : rate >= 60 ? 'good' : 'needs-improvement',
      description: `在${tensorflowQuestions.length}道相关题目中答对${correct}道，掌握程度${rate >= 80 ? '优秀' : rate >= 60 ? '良好' : '需要加强'}`,
      questionIndexes: tensorflowQuestions.map((item) => item.index),
    })
  }

  if (jsQuestions.length > 0) {
    const correct = jsQuestions.filter((item) => item.ex.isCorrect).length
    const rate = (correct / jsQuestions.length) * 100
    analysis.push({
      point: 'JavaScript异步编程',
      level: rate >= 80 ? 'excellent' : rate >= 60 ? 'good' : 'needs-improvement',
      description: `在${jsQuestions.length}道相关题目中答对${correct}道，掌握程度${rate >= 80 ? '优秀' : rate >= 60 ? '良好' : '需要加强'}`,
      questionIndexes: jsQuestions.map((item) => item.index),
    })
  }

  if (dataQuestions.length > 0) {
    const correct = dataQuestions.filter((item) => item.ex.isCorrect).length
    const rate = (correct / dataQuestions.length) * 100
    analysis.push({
      point: '数据处理与模型评估',
      level: rate >= 80 ? 'excellent' : rate >= 60 ? 'good' : 'needs-improvement',
      description: `在${dataQuestions.length}道相关题目中答对${correct}道，掌握程度${rate >= 80 ? '优秀' : rate >= 60 ? '良好' : '需要加强'}`,
      questionIndexes: dataQuestions.map((item) => item.index),
    })
  }

  return analysis
})

// 学习建议
const learningAdvice = computed(() => {
  const advice = []

  if (correctRate.value < 60) {
    advice.push({
      type: 'basic',
      icon: 'BookOutlined',
      title: '加强基础知识学习',
      description: '当前基础知识掌握不够扎实，建议系统性地重新学习相关概念',
      resources: ['官方文档', '基础教程', '概念解析视频'],
    })
  }

  if (correctRate.value >= 60 && correctRate.value < 80) {
    advice.push({
      type: 'consolidate',
      icon: 'BulbOutlined',
      title: '巩固已学知识',
      description: '基础掌握较好，需要通过更多练习来巩固和深化理解',
      resources: ['进阶教程', '实战案例', '技术博客'],
    })
  }

  if (correctRate.value >= 80) {
    advice.push({
      type: 'advanced',
      icon: 'TrophyOutlined',
      title: '拓展深度学习',
      description: '基础扎实，可以学习更高级的概念和技术',
      resources: ['高级教程', '源码分析', '技术论文'],
    })
  }

  // 基于错题知识点给出针对性建议
  const errorKnowledgePoints = knowledgeAnalysis.value.filter(
    (k) => k.level === 'needs-improvement',
  )
  errorKnowledgePoints.forEach((point) => {
    if (point.point.includes('TensorFlow')) {
      advice.push({
        type: 'tensorflow',
        icon: 'FileTextOutlined',
        title: 'TensorFlow.js专项学习',
        description: 'TensorFlow.js相关题目错误较多，建议重点学习模型构建和训练',
        resources: ['TensorFlow.js官方教程', '机器学习实战', 'JavaScript深度学习'],
      })
    }
    if (point.point.includes('JavaScript')) {
      advice.push({
        type: 'javascript',
        icon: 'ThunderboltOutlined',
        title: 'JavaScript异步编程强化',
        description: '异步编程概念需要加强，建议多做Promise和async/await相关练习',
        resources: ['JavaScript高级程序设计', '异步编程实战', 'ES6+新特性'],
      })
    }
  })

  return advice
})

// 练习建议
const practiceAdvice = computed(() => {
  const advice = []

  if (errorQuestions.value.length > 0) {
    advice.push({
      type: 'error-review',
      icon: 'CloseCircleOutlined',
      title: '错题专项练习',
      description: `本次有${errorQuestions.value.length}道错题，建议重点练习相关知识点`,
      schedule: '每天复习2-3道错题，直到完全掌握',
    })
  }

  const fillBlankErrors = errorQuestions.value.filter((q) => q.type === '填空题').length
  if (fillBlankErrors > 0) {
    advice.push({
      type: 'fill-blank',
      icon: 'FileTextOutlined',
      title: '填空题专项训练',
      description: `填空题错误${fillBlankErrors}道，需要加强关键概念的记忆`,
      schedule: '每天背诵10个关键术语，每周测试一次',
    })
  }

  const choiceErrors = errorQuestions.value.filter((q) => q.type === '选择题').length
  if (choiceErrors > 0) {
    advice.push({
      type: 'choice',
      icon: 'CheckCircleOutlined',
      title: '选择题解题技巧',
      description: `选择题错误${choiceErrors}道，需要提高分析和排除能力`,
      schedule: '每天练习20道选择题，总结解题规律',
    })
  }

  return advice
})

// 复习计划
const reviewPlan = computed(() => {
  const plan = []

  // 短期计划（1周内）
  plan.push({
    period: '第1-2天',
    content: '重点复习本次错题，理解错误原因',
    focus: errorQuestions.value.length > 0 ? '错题解析和知识点梳理' : '巩固已掌握知识点',
  })

  plan.push({
    period: '第3-4天',
    content: '针对薄弱知识点进行专项练习',
    focus:
      knowledgeAnalysis.value
        .filter((k) => k.level === 'needs-improvement')
        .map((k) => k.point)
        .join('、') || '全面复习',
  })

  plan.push({
    period: '第5-7天',
    content: '综合练习，模拟测试环境',
    focus: '提高答题速度和准确率',
  })

  // 中期计划（2-4周）
  if (correctRate.value < 80) {
    plan.push({
      period: '第2-3周',
      content: '系统学习相关理论知识',
      focus: '深入理解核心概念',
    })

    plan.push({
      period: '第4周',
      content: '大量练习题训练',
      focus: '熟练掌握解题方法',
    })
  }

  return plan
})

// 获取正确率等级样式
const getRateClass = (rate: number) => {
  if (rate >= 80) return 'rate-excellent'
  if (rate >= 60) return 'rate-good'
  return 'rate-poor'
}

// 获取进度条颜色
const getProgressColor = (rate: number) => {
  if (rate >= 80) return '#52c41a'
  if (rate >= 60) return '#faad14'
  return '#ff4d4f'
}

// 获取知识点掌握等级文本
const getLevelText = (level: string) => {
  switch (level) {
    case 'excellent':
      return '优秀'
    case 'good':
      return '良好'
    case 'needs-improvement':
      return '需加强'
    default:
      return '一般'
  }
}

// 获取结果颜色
const getResultColor = (rate: number) => {
  if (rate >= 90) return 'success'
  if (rate >= 70) return 'warning'
  return 'error'
}

// 获取类型颜色
const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    选择题: 'blue',
    填空题: 'green',
    判断题: 'orange',
    简答题: 'purple',
    综合题: 'red',
    程序题: 'cyan',
  }
  return colorMap[type] || 'default'
}

// 获取成绩等级
const getScoreLevel = (rate: number) => {
  if (rate >= 90) return 'excellent'
  if (rate >= 80) return 'good'
  if (rate >= 70) return 'fair'
  return 'poor'
}

// 获取成绩等级文字
const getScoreGrade = (rate: number) => {
  if (rate >= 90) return '优秀'
  if (rate >= 80) return '良好'
  if (rate >= 70) return '及格'
  return '待提高'
}

// 获取评价标题
const getEvaluationTitle = (rate: number) => {
  if (rate >= 90) return '表现优异！'
  if (rate >= 80) return '表现良好！'
  if (rate >= 70) return '基本掌握'
  return '需要加强'
}

// 获取评价信息
const getEvaluationMessage = (rate: number) => {
  if (rate >= 90) return '恭喜你！掌握得非常好，继续保持这种学习状态。'
  if (rate >= 80) return '不错的表现！再接再厉，争取更好的成绩。'
  if (rate >= 70) return '基本掌握了知识点，建议复习错题加深理解。'
  return '还需要更多练习，建议重点复习相关知识点。'
}

</script>

<style scoped>
.practice-result-display {
  width: 100%;
}

.result-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: none;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
}

.result-icon {
  font-size: 20px;
  color: #faad14;
}

.result-tag {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
}

.result-summary {
  margin-bottom: 24px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.summary-item:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.summary-icon.total {
  background: #4096ff;
}

.summary-icon.correct {
  background: #52c41a;
}

.summary-icon.incorrect {
  background: #ff4d4f;
}

.summary-icon.time {
  background: #faad14;
}

.summary-content {
  flex: 1;
}

.summary-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1;
}

.summary-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.result-evaluation {
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
  border-radius: 12px;
  border: 1px solid #d6e4ff;
}

.evaluation-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.evaluation-score {
  flex-shrink: 0;
}

.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.score-circle.excellent {
  background: linear-gradient(135deg, #52c41a, #73d13d);
}

.score-circle.good {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.score-circle.fair {
  background: linear-gradient(135deg, #faad14, #ffc53d);
}

.score-circle.poor {
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
}

.evaluation-text h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #1f1f1f;
}

.evaluation-text p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.details-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-item {
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  background: #fff;
  transition: all 0.3s ease;
}

.result-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.result-item.incorrect {
  border-color: #ffccc7;
  background: #fff2f0;
}

.result-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.question-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-number {
  font-weight: 600;
  color: #1f1f1f;
}

.result-actions-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

.question-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0 0 8px 0;
}

.question-description {
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

.result-answers {
  margin-bottom: 16px;
}

.answer-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.answer-label {
  width: 80px;
  font-weight: 500;
  font-size: 14px;
}

.answer-label.user-answer {
  color: #666;
}

.answer-label.correct-answer {
  color: #52c41a;
}

.answer-value {
  flex: 1;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.incorrect-answer {
  background: #fff2f0;
  color: #ff4d4f;
}

.correct-value {
  background: #f6ffed;
  color: #52c41a;
}

.explanation-panel :deep(.ant-collapse-header) {
  padding: 8px 0;
  font-weight: 500;
  color: #faad14;
}

.explanation-content {
  padding: 12px;
  background: #fffbe6;
  border-radius: 8px;
  border-left: 4px solid #faad14;
  line-height: 1.6;
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 500;
}

.action-btn.primary {
  background: #4096ff;
  border-color: #4096ff;
}

/* 智能分析报告样式 */
.analysis-modal :deep(.ant-modal-content) {
  border-radius: 16px;
  overflow: hidden;
}

.analysis-modal :deep(.ant-modal-header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  padding: 20px 24px;
}

.analysis-modal :deep(.ant-modal-title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.analysis-content {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
}

.analysis-section {
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.analysis-section:last-child {
  border-bottom: none;
}

.analysis-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.type-analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.type-item {
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.type-name {
  font-weight: 600;
  color: #1f1f1f;
}

.type-rate {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.rate-excellent {
  background: #f6ffed;
  color: #52c41a;
}

.rate-good {
  background: #fffbe6;
  color: #faad14;
}

.rate-poor {
  background: #fff2f0;
  color: #ff4d4f;
}

.type-progress {
  margin: 8px 0;
}

.type-detail {
  font-size: 12px;
  color: #666;
}

.knowledge-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-item {
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #722ed1;
}

.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.knowledge-name {
  font-weight: 600;
  color: #1f1f1f;
}

.knowledge-level {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.knowledge-level.excellent {
  background: #f6ffed;
  color: #52c41a;
}

.knowledge-level.good {
  background: #fffbe6;
  color: #faad14;
}

.knowledge-level.needs-improvement {
  background: #fff2f0;
  color: #ff4d4f;
}

.knowledge-detail {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.suggestions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.suggestion-item:hover {
  background: #e6f7ff;
  transform: translateY(-1px);
}

.suggestion-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 4px;
}

.suggestion-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 易错题分析样式 */
.error-analysis {
  margin-top: 16px;
}

.no-errors {
  text-align: center;
  padding: 40px 20px;
  background: #f6ffed;
  border-radius: 12px;
  border: 1px solid #b7eb8f;
}

.success-icon {
  font-size: 48px;
  color: #52c41a;
  margin-bottom: 16px;
}

.success-text {
  font-size: 16px;
  color: #52c41a;
  font-weight: 600;
}

.error-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff2f0;
  border-radius: 8px;
  margin-bottom: 16px;
  border-left: 4px solid #ff4d4f;
}

.error-count {
  font-weight: 600;
  color: #ff4d4f;
}

.error-rate {
  font-size: 14px;
  color: #666;
}

.error-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.error-question-item {
  padding: 20px;
  background: #fafafa;
  border-radius: 12px;
  border-left: 4px solid #ff4d4f;
  transition: all 0.3s ease;
}

.error-question-item:hover {
  background: #fff2f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.1);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.question-number {
  font-weight: 600;
  color: #ff4d4f;
  background: #fff2f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.question-type-tag {
  background: #f0f0f0;
  color: #666;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.question-content {
  font-size: 14px;
  line-height: 1.6;
  color: #1f1f1f;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border-radius: 6px;
}

.answer-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.answer-item {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid;
}

.answer-item.correct {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.answer-item.incorrect {
  background: #fff2f0;
  border-color: #ffccc7;
}

.answer-label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.answer-item.correct .answer-label {
  color: #52c41a;
}

.answer-item.incorrect .answer-label {
  color: #ff4d4f;
}

.answer-value {
  font-size: 14px;
  color: #1f1f1f;
}

.question-explanation {
  margin-bottom: 12px;
}

.explanation-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #faad14;
  margin-bottom: 8px;
}

.explanation-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  padding: 12px;
  background: #fffbe6;
  border-radius: 6px;
  border-left: 3px solid #faad14;
}

.error-reason {
  margin-top: 12px;
}

.reason-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #722ed1;
  margin-bottom: 8px;
}

.reason-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  padding: 12px;
  background: #f9f0ff;
  border-radius: 6px;
  border-left: 3px solid #722ed1;
}

/* 知识点题目标签样式 */
.knowledge-questions {
  margin-top: 12px;
}

.questions-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.question-tag.correct {
  background: #f6ffed;
  color: #52c41a;
  border-color: #b7eb8f;
}

/* 建议分类样式 */
.suggestion-category {
  margin-bottom: 24px;
}

.suggestion-category h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.suggestion-resources {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.resources-label {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

.resource-tag {
  background: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid #91d5ff;
}

.suggestion-schedule {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-label {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

.schedule-content {
  font-size: 12px;
  color: #722ed1;
  background: #f9f0ff;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 复习计划样式 */
.review-plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
  transition: all 0.3s ease;
}

.plan-item:hover {
  background: #e6f7ff;
  transform: translateY(-1px);
}

.plan-period {
  font-weight: 600;
  color: #1890ff;
  font-size: 14px;
  margin-bottom: 8px;
}

.plan-content {
  font-size: 14px;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.plan-focus {
  font-size: 12px;
  color: #666;
  font-style: italic;
}

/* 学习助手提示样式 */
.learning-assistant-tip {
  margin-top: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae7ff;
  border-radius: 6px;
  text-align: center;
}

.assistant-tip-btn {
  color: #1890ff;
  font-size: 13px;
  padding: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.assistant-tip-btn:hover {
  color: #40a9ff;
  transform: translateY(-1px);
}

.assistant-tip-btn .anticon {
  font-size: 14px;
}
</style>
